<template>
  <el-dialog :visible.sync="dialogVisible" width="700px"
             title="选择产品模板" center>
    <ul class="dialogTemp">
      <li v-for="item,index in templateList" :key="index">
        <div class="the-content">
          <div v-html="item.htmlContent"></div>
        </div>
        <h1 class="my-title">
          <el-radio v-model="isFrag" :label="index">{{item.templateName}}</el-radio>
        </h1>
      </li>
    </ul>
    <!-- 底部按钮-->
    <div slot="footer" class="dialog-footer" align="right">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" size="mini" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {productList} from "@/api/automation/product"
    import {getProductDetails} from '@/api/product'
    import {filterProduct} from '@/util/util'
    export default {
        name: "DialogProductEmail",
        data() {
            return {
                dialogVisible: false,
                templateList: [],
                email:{},
                isFrag: 0
            }
        },
        methods: {
            init(id){
                this.getTemplate(id);//获取产品模板 getData-pro
            },
            submit(){
                let target = this.templateList[this.isFrag].htmlContent;
                const waitContent = filterProduct(target,this.email)
                this.$router.push({
                    path: '/mail/write/index',
                    query: {content: waitContent}
                });
            },
            getTemplate(id) {
                productList('', '', 1, 1000).then(res => {//待定
                    if (res.data.success) {
                        this.templateList = res.data.data.records;
                        if(this.templateList.length==0){
                            this.$confirm('您还没有创建产品模板，立即去创建', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'success'
                            }).then(() => {
                                this.$store.commit('SET_CURRENTSETFRAG','second')
                                this.$router.push('/product/set')
                            }).catch(() => {
                            });
                        }else{
                            this.getEmailDetail(id);//获取邮件详情
                            this.dialogVisible=true;
                        }
                    }
                })
            },
            getEmailDetail(id){
                getProductDetails(id).then((res) => {
                    if (res.data.success) {
                        this.email = res.data.data;
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
  .el-dialog__header {
    padding: 20px 20px 25px;
  }

  .dialogTemp {
    display: flex;
    flex-wrap: wrap;
    max-height: 400px;
    overflow-y: auto;

    li {
      width: 200px;
      height: 300px;
      background-color: #E9F3FD;
      margin-left: 10px;

      .the-content {
        height: 250px;
        border: 0;
        font-size: .2em;
        overflow: hidden;
        transform: scale(0.5) translateX(0) translateY(0);

        img {
          width: 100%;
          height: 100%;
        }
      }

      .my-title {
        line-height: 50px;
        background-color: #fff;
      }
    }
  }
</style>
